<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>站点选择</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/home/search.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> -->
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
    <style>
        .nav-ri .search-box .search-input .input-position{
            display: flex;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
	<header-component></header-component>
	<navinner-component></navinner-component>

	<!-- 主站导航 -->
	<navrow-component  v-if="sitelevel == ''" :siteid="site_data"></navrow-component>
	<!-- 行政站导航 -->
	<navtab2-component v-if="sitelevel != 5 && sitelevel != '' " :siteid="site_data"></navtab2-component>
	<!-- 基层站导航 -->
	<navtab3-component v-if="sitelevel==5" :siteid="site_data"></navtab3-component>

	<main>
		<div class="content" id="search-site">
			<div class="search-page">
				<div class="search-header">
					<div class="search-tip-l">当前选择：
						<a v-for="(item,index) in selectList" :data-id="item.site_id" @click="toggleCity(item)">
							{{index == 0 ? '' : '/'}}
							<span>{{decodeURI(item.name)}}</span>
							<span v-if="index == 4">{{decodeURI(item.sitename)}}</span>

						</a>
						<a class="goTo" @click="goTo">进入当前行政站点</a>
					</div>
					<div class="search-tip-r">
						没找到自己的小区怎么办？<a href="../login/register-station.html">点击注册小区分站</a><a v-if="cityList.length">{{cityList[0].name}}</a>
					</div>
				</div>
				<div class="select-list">
					<a class="select-item2" v-for="(item , index) in cityList" @click="toggleCity(item)" v-cloak>
<!--						<span v-if="selectList.length > 3">{{item.sitename}}</span>-->
						<span>{{item.sitename}}</span>
<!--						<span v-if="selectList.length <= 3||selectList.length ==null">{{item.name }}</span>-->
					</a>
				</div>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
</div>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>

<script>


    var search = new Vue({
        el:"#app",
        data    : {
            siteList:['province','city','area','town','biotope'],

            province_id:"",             // 省级id
            city_id:"",                 // 市级id
            area_id:"",                 // 区级id
            result:"",                  // 最后结果

            selectList:[],                // 选中数据

            cityList:[],                // 城市数据

			sitelevel:"",
			site_data:''
        },
        mounted(){
            var _th = this;
            this.province_id = parameter.id;
            this.selectList.push(parameter)

			if (window.localStorage.getItem('station')){
				this.sitelevel = JSON.parse(window.localStorage.getItem('station')).site_level;
			}

            this.getSubSite();
        } ,
        methods : {
            // 切换城市
            toggleCity(item){
				var self = this;
				for(var i=0; i<this.selectList.length; i++){
					if( item.id == this.selectList[i].id ){
						this.selectList.splice(i);
					}
				}
				this.selectList.push(item);
				if (item.site_level==5){
					this.goTo()
				} else{
					this.getSubSite();
				}

            },
            getSubSite(){
                var data = {};
                this.selectList.map(function(item,index){
                    switch( index ){
                        case 0:
                            data.province_id = item.id;
                            break;
                        case 1:
                            data.city_id = item.id;
                            break;
                        case 2:
                            data.area_id = item.id;
                            break;
                        case 3:
                            data.town_id = item.id;
                    }
                });

                axios.post(sysurl + 'common/siteFive' , data ).then(res => {
                    var datas = res.data;

                    if( datas.code === 1 ){
                        this.cityList = datas.data;
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 进入当前行政区域
            goTo(){
                var self = this;
                var station = this.selectList[this.selectList.length-1];

                if(station.site_level == this.selectList.length){
					window.localStorage.setItem("station",JSON.stringify(station));
					if(station.site_level == 5){
						window.location.href = "./stationC.html?siteid=" + station.site_id;
					}else{
						window.location.href = "./stationB.html?siteid=" + station.site_id;
					}
					inSite(station);
				}else{
                	layer.msg("当前站点未认证，请尝试上级或下级站点")
				}
            },
        } ,
        filters : {} ,
    })

</script>
</body>
</html>
